<template>
    <div class="outter">
        <div>
            <el-select v-model="choice" placeholder="请选择" style="width: 150px;">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="searchFor" placeholder="请输入内容" style="width: 300px;"></el-input>
            <el-button type="info" @click="searching">查询</el-button>
        </div>
        <el-table :data="newPageData.order" height="100%" border style="width: 100%">
            <el-table-column
            prop="username"
            label="用户名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="goods"
            label="订单商品"
            width="180">
            </el-table-column>
            <el-table-column
            prop="time"
            label="下单时间">
            </el-table-column>
            <el-table-column
            prop="count"
            label="商品数量">
            </el-table-column>
            <el-table-column
            prop="status"
            label="订单状态">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="~~newPageData.currentPage"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="~~newPageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="newPageData.totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers("order");
export default {
    mounted(){
        this.getAllOrderAsync();
    },
    data() {
        return {
            // 筛选选项静态
            options: [{
                value: 'username',
                label: '用户名'
            }, {
                value: 'goods',
                label: '订单商品'
            }, {
                value: 'time',
                label: '下单时间'
            }, {
                value: 'count',
                label: '商品数量'
            }, {
                value: 'status',
                label: '订单状态'
            }],
            choice: '',
            searchFor: '',
        }
    },
    computed: {
        ...mapState(["pageData"]),
        ...mapGetters(["newPageData"]),
    },
    methods: {
        ...mapActions(["getAllOrderAsync"]),
        ...mapMutations(["searchingFor"]),
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.newPageData.pageSize = val;
        this.getAllOrderAsync();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.newPageData.currentPage = val;
        this.getAllOrderAsync();
        },
        searching(){
            this.searchingFor({choice: this.choice, searchFor: this.searchFor});
        }
    },
}
</script>

<style>
.outter{
    width: 100%;
    height: 80%;
}
</style>